<template>
  <div class="overlay">
    <van-overlay :show="showoff">
      <van-steps :active="active" active-color="orange" inactive-color="#fff">
        <van-step>买家下单</van-step>
        <van-step>商家接单</van-step>
        <van-step>买家提货</van-step>
      </van-steps>
      <div class="wrapper">
        <div class="block">
          <copyDialog v-if="tip" @closeCopy="closeCopy"/>
          <!-- 复制口令 -->
          <button class="buy_btn" @click="tip=true">已选择商品</button>
          <div class="block-t">
            <div class="header">
              <span></span>
              <span>仓库正在发货</span>
              <span @click="closeFn">
                <svg-icon iconClass="close"></svg-icon>
              </span>
            </div>
            <div class="main">
              <div class="item_area" v-if="area">
                <div class="dzicon">
                  <svg-icon iconClass="dizhi"></svg-icon>
                </div>
                <div>
                  <p class="username">
                    <b>{{name}}</b>
                    {{tel}}
                  </p>
                  <p>{{value}}</p>
                </div>
              </div>
              <p v-else>请添加地址</p>
            </div>
            <div class="footer">
              <van-cell is-link @click="showPopup" v-if="this.active != 2">添加收货地址</van-cell>
              <van-cell v-else>请注意查收</van-cell>
              <van-popup v-model="show" class="add">
                <!-- 输入任意文本 -->
                <van-field v-model="name" label="收货人" class="a"/>
                <!-- 输入手机号，调起手机号键盘 -->
                <van-field v-model="tel" type="tel" label="手机号" class="a"/>
                <!-- 允许输入正整数，调起纯数字键盘 -->
                <van-field
                  v-model="value"
                  label="地址"
                  class="a"
                />
                <span class="jiantou" @click="address">></span>
                <!-- 允许输入数字，调起带符号的纯数字键盘 -->
                <van-field
                  v-model="number"
                  type="number"
                  label="收货人电话"
                  class="a"
                />
                <!-- 输入密码 -->
                <van-field
                  v-model="password"
                  type="password"
                  label="配送费"
                  class="a"
                />
                <button @click="toexam()">确认添加地址</button>
                <van-area
                  title="标题"
                  :area-list="areaList"
                  value="110101"
                  v-show="show1"
                  @confirm="confirm"
                  @cancel="cancel"
                  @change="change"
                />
              </van-popup>
            </div>
          </div>
          <div class="block-b">
            <div class="head">
              <span></span>
              <span>相关商品推荐</span>
              <span></span>
            </div>
            <div class="shop">
              <dl
                v-for="(item, index) in list"
                :key="index"
                @click="
                  {
                  }
                "
              >
                <dt>
                  <img src="../images/2.jpg" alt="" class="shopimg" />
                </dt>
                <dd>
                  <p>{{ item.title }}</p>
                  <b>￥{{ item.price }}</b>
                </dd>
              </dl>
            </div>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import areaList from "../Mock/area/areaList";
import copyDialog from "./copyDialog.vue";
import { Toast } from "vant";
import axios from "axios";
export default {
  data() {
    return {
      show: false,
      show1: false,
      list: [],
      tel: "",
      name: "",
      digit: "",
      number: "",
      password: "",
      active: 1,
      tip: false, //复制口令
      area: {
        name: "1",
        tel: "2",
        home: "3",
      },
      areaList: areaList,
      value: "",
    };
  },
  components: {
    copyDialog,
  },
  props: {
    showoff: Boolean,
  },
  created() {
    axios("/homeList").then((res) => {
      console.log(res);
      this.list = res.data.list;
    });
    this.area = JSON.parse(localStorage.getItem("area")) || false;
  },
  methods: {
    closeCopy(flt) {
      this.tip = flt;
      /* this.closeFn() */
    },
    closeFn() {
      this.$emit("close", !this.showoff);
    },
    toaddress() {},
    showPopup() {
      this.show = true;
    },
    toexam() {
      Toast("添加成功,可在我的页面查看");
      const hh = {
        name:this.name,
        tel:this.tel,
        home:this.digit
      }
      this.area=hh;
      window.localStorage.setItem('area', JSON.stringify(hh))
      this.show = false
    //  this.$router.push("/examine"); 
      this.active += 1
    },
    activenext() {},
    //点击事件出现选择框
    address() {
      this.show1 = true;
    },
    //确定事件
    confirm(value) {
      console.log(value);
      value.forEach((item)=>{
        this.value += `${item.name}   `;
      })
      console.log(this.value)
       this.show1 = false;
    },
    //取消事件
    cancel() {
      this.show1 = false;
    },
    //选项改变事件
    change(){
      this.value=''
    }
  },
};
</script>

<style lang="scss" scoped>
.jiantou{
  position: absolute;
  top: 15%;
  right: 10px;
  font-size: 20px;
}
.van-cell__value--alone {
  width: 100%;
  text-align: center;
}
.buy_btn {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 100;
  border: 0;
  border-radius: 50px;
  font-size: 12px;
  color: #fff;
  padding: 10px 15px;
  background: red;
}
/deep/.van-steps {
  background: rgba(0, 0, 0, 0.1);
  color: #fff;
  position: absolute;
  width: 80%;
  top: 8%;
  left: 50%;
  transform: translate(-50%, 0);
}
/deep/.van-step--finish {
  color: #febf4b;
}
/deep/.van-step__title {
  font-size: 18px;
}
/deep/.van-step__line {
  height: 3px;
}
/deep/.van-step__circle-container {
  background: none;
}
/deep/.van-step__circle {
  width: 15px;
  height: 15px;
}
/deep/.van-icon van-icon-checked {
  font-size: 23px;
  margin: 0 -9px;
}
.overlay {
  width: 100%;
  height: 100%;
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
  }

  .block {
    width: 100%;
    height: 600px;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #ccc;

    .block-t {
      background: #fff;
      .header {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30px;
        font-size: 16px;
      }
      .main {
        width: 100%;
        height: 80px;
        border-bottom: 1px solid #ccc;
        display: flex;
        padding: 0 18px;
        align-items: center;
        .dzicon {
          font-size: 16px;
          margin-right: 10px;
        }
        .username {
          font-size: 12px;
          b {
            font-size: 16px;
          }
        }
        .userdz {
          font-size: 16px;
        }
      }
      .footer {
        width: 100%;
        height: 80px;
        font-size: 13px;
        text-align: center;
        line-height: 40px;
        color: #ccc;
        button {
          width: 70%;
          height: 40px;
          background: red;
          border: none;
          border-radius: 20px;
          color: #fff;
          margin-top: 10px;
        }
        .add {
          width: 100%;
          height: 700px;
        }
        .a {
          width: 100%;
          height: 50px;
          border-bottom: 1px solid #ccc;
          position: relative;
        }
      }
    }
    .block-b {
      width: 100%;
      height: 100%;
      margin-top: 10px;
      background: #fff;

      position: relative;
      display: flex;
      flex-direction: column;

      .head {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
      }
      .shop {
        width: 100%;
        height: auto;
        flex: 1;
        overflow-y: auto;
        padding: 0 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-bottom: 200px;
        dl {
          width: 49%;
          height: auto;
          padding: 0 30px;
          dt {
            padding: 5px 10px;
            img {
              width: 100px;
              height: 100px;
              border-radius: 10px 15px 0 0;
            }
          }
          dd {
            padding: 5px 10px;
            font-size: 16px;
            b {
              color: red;
            }
          }
        }
      }
    }
  }
}
</style>